<template>
  <div id="firstChild">
    <!-- 弹出框  消防广播 -->
    <el-dialog
      title="设置电子围栏"
      :visible.sync="dialogVisibleguangbo"
      width="20%"
      top="2vh"
      :modal="false"
      :append-to-body="true"
      @click="chuachua"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        size="medium"
        label-width="90px"
        class="demo-ruleForm"
      >
        <el-form-item label="围栏名称:" prop="yingji" width="110px">
          <el-select
            v-model="form.yingji"
            placeholder="请选择围栏"
            label-width="200px"
          >
            <el-option label="A1" value="huozai"></el-option>
            <el-option label="A2" value="baozha"></el-option>
            <el-option label="A3" value="duhai"></el-option>
            <el-option label="A4" value="hunagjing"></el-option>
            <el-option label="A5" value="qtjy"></el-option>
            <el-option label="A6" value="qtjy"></el-option>
            <el-option label="A7" value="qtjy"></el-option>
            <el-option label="A8" value="qtjy"></el-option>
            <el-option label="A9" value="qtjy"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="活动时间" required width="110px">
          <el-date-picker
            v-model="form.value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="禁入人员:" prop="tongzhi">
          <el-select v-model="form.tongzhi" placeholder="请选择禁止人员">
            <el-option label="张三" value="zhangsan"></el-option>
            <el-option label="李四" value="lisi"></el-option>
            <el-option label="王五" value="wangwu"></el-option>
            <el-option label="其他" value="qita"></el-option>
          </el-select>
        </el-form-item>

        <div class="but">
          <el-button @click="dialogVisibleguangbo = false">取消</el-button>
          <el-button @click="showRed">确定</el-button>
        </div>

        <!-- <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span> -->
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisibleguangbo: false,
      form: {
        name: "",
        yingji: "",
        baojing: "",
        tongzhi: "",
        date1: "",
        date2: "",
      },
      rules: {
        yingji: [
          { required: true, message: "请选择应急预案", trigger: "blur" },
        ],
        baojing: [
          { required: true, message: "请选择报警联动", trigger: "change" },
        ],
        tongzhi: [
          { required: true, message: "请选择通知人员", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    // handleClose() {
    //   this.dialogVisiblezhihui = false;
    // },
    // handleClosegaojing() {
    //   this.dialogVisibleguangbo = false;
    // },
    chuachua() {
      this.dialogVisibleguangbo = !this.dialogVisibleguangbo;
    },
    showRed() {
      this.dialogVisibleguangbo = false;
      console.log("显示红色按钮");
      //   bus.$emit("userDefinedEvent", "this message is fron firstChild");
      this.$emit("pf");
      this.$parent.ishowrenbtn();
    },
  },
};
</script>

<style lang="scss" scoped>
.but {
  display: flex;
  justify-content: space-around;
}
.el-form-item {
  margin-bottom: 14px;
}

// .el-input--prefix .el-input__inner {
//   padding-left: 0;
// }
// .el-input--prefix .el-input__inner {
//   padding-right: 0;
// }
</style>
